//头部和左侧的组件

import React,{Component} from 'react';
import './navbar.css';
import {Link} from 'react-router-dom';

class NavBar extends Component{
	//设置初始值
	constructor(){
		super();
		//设置左侧菜单的初始值
		this.state = {
			isShow:false,
			goTop:false
		}
	}
	
	//头部的点击事件
	changeMenuType=()=>{
		this.setState({
			isShow:!this.state.isShow
		})
	}
	//钩子函数
	componentDidMount(){
		let _this = this;
		//滚动事件
		document.onscroll = function(){
			var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
//			console.log(scrollHeight)
			if(scrollHeight > 10){
				_this.setState({
					goTop:true
				})
			}else{
				_this.setState({
					goTop:false
				})
			}
		}
	}
	goTopFunc=()=>{
		document.documentElement.scrollTop = 0;
		document.body.scrollTop = 0;
	}
	
	render(){
		return (
			<div>
				<div className="film-header">
				<span className="fa fa-bars" onClick={this.changeMenuType}></span>
				卖座电影
				<span className="shenzheng">深圳</span>
				<span className="fa fa-angle-down"></span>
				<Link to='/login'><span className="fa fa-user-o"></span></Link>
				
				</div>
				<nav className="film-menu" style={this.state.isShow?{'right':'30%'}:{'right':'100%'}}  onClick={this.changeMenuType}>
					<ul>
						<li>
							<Link to="/">首页</Link>
							<i className="fa fa-angle-right"></i>
						</li>
						<li>
							<Link to="/film/npwplaying">影片</Link>
							<i className="fa fa-angle-right"></i>
						</li>
						<li>
							<Link to="/cinema">影院</Link>
							<i className="fa fa-angle-right"></i>
						</li>
						<li>
							<Link to="/film">商城</Link>
							<i className="fa fa-angle-right"></i>
						</li>
						<li>
							<Link to="/cinemater">我的</Link>
							<i className="fa fa-angle-right"></i>
						</li>
						<li>
							<Link to="/film">卖座卡</Link>
							<i className="fa fa-angle-right"></i>
						</li>
					</ul>
				</nav>
				<div className="goTop" onClick={this.goTopFunc} style = {this.state.goTop?{'bottom':'10px'}:{'bottom':'-52px'}}>
					<i className="fa fa-chevron-up"></i>
				</div>
			</div>
		)
	}
}


//输出
export default NavBar;